<template>
  <div>
    <div class="my_title">
      <van-nav-bar
        title="城市列表"
        left-arrow
        @click-left="onClickLeft"
        fixed
      ></van-nav-bar>
    </div>

    <div class="my_cityList">
      <van-index-bar :index-list="newListKey" highlight-color="#50b979" sticky>
        <div class="my_city">
          <van-index-anchor :index="newListKey[0]">当前城市</van-index-anchor>
          <van-cell :title="NowCity.label" @click="changeNowCity(NowCity)" />
        </div>

        <div>
          <van-index-anchor :index="newListKey[1]">热门城市</van-index-anchor>
          <van-cell
            :title="item.label"
            v-for="(item, index) in HotCity"
            :key="index"
            @click="changeNowCity(item)"
          />
        </div>

        <div v-for="(item, index) in ListKey" :key="index">
          <van-index-anchor :index="item"></van-index-anchor>
          <van-cell
            :title="i.label"
            v-for="(i, k) in List[item]"
            :key="k"
            @click="changeNowCity(i)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { getCityList, getHostCity } from '@/api/home'
import { getCity, setCity } from '@/utils/storage'
export default {
  data() {
    return {
      level: 1,
      List: {},
      ListKey: [],
      newListKey: ['#', '热'],
      HotCity: [],
      NowCity: '',
      flag: false
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    changeNowCity(value) {
      setCity(value)
      this.$router.back()
    }
  },
  async created() {
    const res = await getCityList(this.level)
    // console.log(res)
    const hotCity = await getHostCity()
    this.NowCity = getCity()
    // console.log(this.NowCity)

    res.body.forEach((item) => {
      const key = item.short[0].toUpperCase()
      this.List[key] = []

      res.body.forEach((it) => {
        if (key === it.short[0].toUpperCase()) {
          this.List[key].push(it)
        }
      })
    })

    for (const k in this.List) {
      if (!this.ListKey.includes(k)) {
        this.ListKey.push(k)
      }
    }
    this.ListKey = this.ListKey.sort()
    this.newListKey.push(...this.ListKey)
    this.HotCity.push(...hotCity.body)

    console.log(this.List)
    console.log(this.ListKey)
    // console.log(this.HotCity)
    // console.log(...hotCity.body)
  }
}
</script>

<style scoped lang="less">
/deep/ .van-nav-bar {
  color: #fff;
}
.my_cityList {
  position: fixed;
  top: 46px;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}
// /deep/ .van-index-bar__index--active {
//   width: 20px;
//   height: 20px;
//   line-height: 20px;
//   background-color: #50b979;
//   border-radius: 50%;
// }
</style>
